<template>
    <div class="operation-box">
        <div class="operation-item choose-color-btn"
             @tap="tap_choose_color_btn">
            选色
        </div>
        <div class="operation-item"
             @tap="tap_choose_width_btn">笔粗</div>
        <div class="operation-item"
             @tap="revoke_one">撤销</div>
        <div class="operation-item reserve"
             @tap="reserve">清空画板</div>
        <div class="choose-color-box"
             v-show="choose_color_show">
            <div v-for="(item,index) in choose_color_tmplate"
                 :key="index"
                 class="choose-color-item"
                 :style="{backgroundColor: item}"
                 @tap="choose_color(item)"></div>
        </div>
        <div class="choose-color-box"
             v-show="choose_width_show">
            <div v-for="(item,index) in choose_width_tmplate"
                 :key="index"
                 class="choose-color-item choose-width"
                 @tap="choose_width(item)">
                <div class="circular-point"
                     :style="{width: item+'px',height:item+'px'}"></div>
            </div>
        </div>
    </div>
</template>
<script>
import store from '@/store';
export default {
    props: {
        house_id: [Number, String],
        drawing_useing: Object
    },
    data() {
        return {
            choose_color_show: false,
            choose_width_show: false,
            choose_width_tmplate: [1, 5, 10, 15, 25],
            choose_color_tmplate: [
                '#202020',
                '#ff0000',
                '#33cc00',
                '#ff9900',
                '#0000ff',
                '#fffafa',
                '#00bfff',
                '#8b4513',
                '#9400d3'
            ],
        }
    },
    computed: {
        G() {
            return store.state.globalData;
        }
    },
    methods: {
        // 撤销一步
        revoke_one() {
            this.$emit('revoke_one')
        },
        // 清空canvas
        reserve() {
            this.$emit('reserve')
        },
        // 点击选择线宽
        tap_choose_width_btn() {
            this.choose_color_show = false; // 这里的false就是隐藏
            this.choose_width_show = !this.choose_width_show;
        },
        // 点击选色按钮
        tap_choose_color_btn() {
            this.choose_width_show = false;
            this.choose_color_show = !this.choose_color_show;
        },
        // 确认选色
        choose_color(color) {
            this.drawing_useing.drawing_color = color;
            this.choose_color_show = !this.choose_color_show;
        },
        // 确认选宽
        choose_width(width) {
            this.drawing_useing.drawing_width = width;
            this.choose_width_show = !this.choose_width_show;
        },
    }
}
</script>
<style scoped>
.operation-box {
  background: #fff5ee;
  position: relative;
  height: 9%;
}
.operation-box .operation-item {
  display: inline-block;
  padding: 7rpx 32rpx;
  margin: 8px;
  height: 60rpx;
  text-align: center;
  line-height: 60rpx;
  border: 1px solid #dbdbdb;
  font-size: 24rpx;
  border-radius: 4px;
  color: #727272;
}

.choose-color-box {
  position: absolute;
  bottom: -40px;
  left: 0;
  z-index: 9;
}
.choose-color-box .choose-color-item {
  float: left;
  box-sizing: border-box;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid #666;
}
.choose-color-item.choose-width {
  text-align: center;
  background: #fff;
  line-height: 40px;
  border: 1px solid red;
}
.choose-width .circular-point {
  display: inline-block;
  background: #000;
  vertical-align: middle;
  border-radius: 50%;
}
</style>
